/***********************************************************************************
 * X2Engine Open Source Edition is a customer relationship management program developed by
 * X2 Engine, Inc. Copyright (C) 2011-2019 X2 Engine Inc.
 * 
 * This program is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License version 3 as published by the
 * Free Software Foundation with the addition of the following permission added
 * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
 * IN WHICH THE COPYRIGHT IS OWNED BY X2ENGINE, X2ENGINE DISCLAIMS THE WARRANTY
 * OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
 * 
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
 * details.
 * 
 * You should have received a copy of the GNU Affero General Public License along with
 * this program; if not, see http://www.gnu.org/licenses or write to the Free
 * Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
 * 02110-1301 USA.
 * 
 * You can contact X2Engine, Inc. P.O. Box 610121, Redwood City,
 * California 94061, USA. or at email address contact@x2engine.com.
 * 
 * The interactive user interfaces in modified source and object code versions
 * of this program must display Appropriate Legal Notices, as required under
 * Section 5 of the GNU Affero General Public License version 3.
 * 
 * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
 * these Appropriate Legal Notices must retain the display of the "Powered by
 * X2 Engine" logo. If the display of the logo is not reasonably feasible for
 * technical reasons, the Appropriate Legal Notices must display the words
 * "Powered by X2 Engine".
 **********************************************************************************/




@import "colors";

$hrColor: lighten($gray,8%);
$defaultSpacing: 12px;

$profileImageHeight: 70px;

#google-plus-widget-top-bar-logo {
    background-image: url(../../../../images/googleIcons/btn_google+_dark_normal_ios.png);
    display: block;
    height: 24px;
    position: relative;
    background-size: 26px;
    margin-right: 5px;
    width: 28px;
    float: left;
    background-repeat: no-repeat;
    top: -2px;
    left: 3px;
}

#GooglePlusProfileWidget-widget-container- {
    #google-plus-user-id-selector {
        margin: 1px 0px 4px 5px;
        border: 1px solid #F5F5F5;
    }
    .load-more-posts-button {
        margin: 0;
        width: 100%;
        border: none;
        border-radius: 0 0 2px 2px;
    }
    #GooglePlusProfileWidget-widget-content-container- {
        * {
            box-sizing: border-box;
        }
        .google-plus-profile {
            padding: 5px 0 5px 0;
            .profile-name {
                line-height: $profileImageHeight;
                font-size: 14px;
            }
            .profile-column {
                min-width: 100px;
                width: 25%;
            }
            text-align: center;
            .profile-image-container {
                display: inline-block;
            }
            .profile-info-container {
                display: inline-block;
                height: $profileImageHeight;
                vertical-align: top;
            }
            .profile-image {
                border-radius: 50%;
            }
            border-bottom: 1px solid $hrColor;
        }
        hr {
            margin: 0;
        }
        .google-plus-posts {
            position: relative;
            .resize-handle {
                position: absolute !important;
                bottom: 0;
            }
            .list-view {
                overflow-y: auto;
                .items {
                    span.empty {
                        text-align: center;
                        padding: 5px 5px 5px 5px;
                    }
                    border: none;
                    border-top: 1px solid $hrColor;
                    &:first-child {
                        border-top: none;
                    }
                    border-radius: 0;
                    .post-container {
                        padding: 15px 18px 18px 18px;
                        border-bottom: 1px solid $hrColor;
                        overflow-x: hidden;
                        &:hover {
                            overflow-x: auto;
                        }
                        &:last-child {
                            border-bottom: none;
                        }
                        .date-published {
                            color: $grayText;
                            margin-bottom: $defaultSpacing;
                            display: block;
                        }
                        .article-container {
                            margin-top: $defaultSpacing;
                            border-top: 1px solid $hrColor;
                            padding-top: $defaultSpacing;
                            & > * {
                                display: inline-block;
                            }
                            .article-text-content-container {
                                vertical-align: top;
                                & > a {
                                    display: block;
                                }
                                .article-display-name {
                                    margin-bottom: $defaultSpacing / 2;
                                    font-size: 14px;
                                }
                                .article-content {
                                    margin-top: $defaultSpacing;
                                    color: $grayText;
                                }
                            }
                        }
                        .photo-image-container {
                            margin-top: $defaultSpacing;
                            text-align: center;
                            background: $lightestGray;
                            border: 1px solid darken($lightestGray,5%);
                            img {
                                display: block;
                                margin: auto;
                            }
                        }
                        .video-container {
                            display: inline-block;
                            position: relative;
                            iframe {
                                border: none;
                            }
                            .video-image {
                                max-height: 260px;
                                max-width: 350px;
                                margin-top: $defaultSpacing;
                                cursor: pointer;
                            }
                            .video-play-button {
                                position: absolute;
                                left: 0;
                                right: 0;
                                margin: auto;
                                top: 0;
                                bottom: 0;
                                height: 42px;
                                font-size: 20px;
                                padding-top: 11px;
                                padding-left: 3px;
                                text-align: center;
                                width: 42px;
                                background: rgba(0, 0, 0, 0.41);
                                color: white;
                                border-radius: 50%;
                                cursor: pointer;
                            }
                        }

                        .event-display-name {
                            cursor: pointer;
                        } 
                    }
                }
            }
        }
    }
}



